<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="yes" name="apple-touch-fullscreen" />
  <meta content="telephone=no,email=no" name="format-detection" />
  <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes" />
  <title>萌宝购物</title>
  <link rel="stylesheet" href="css/core.css">
  <link rel="stylesheet" href="css/icon.css">
  <link rel="stylesheet" href="css/home.css">
  <link rel="stylesheet" href="font/iconfont.css">
</head>

<body style="background-color: #f5f5f5;">
  <div class="container">

    <header class="aui-header-default aui-header-fixed ">
      <a href="javascript:history.back(-1)" class="aui-header-item">
        <i class="aui-icon aui-icon-back"></i>
      </a>
      <div class="aui-header-center aui-header-center-clear">
        <div class="aui-header-center-logo">
          <div class="">订单详情</div>
        </div>
      </div>
    </header>

    <main class="main order-detail" style="padding: 44px 0;">

      <div class="process">
        <div class="warp flex row-between col-center">
          <div class="item w100">
            <div class="l flex row-center col-center">
              <img src="img/order_detail_point2.png" alt="">
              <div class="line"></div>
            </div>
            <p class="l-state active">下单</p>
          </div>
          <div class="item w100">
            <div class="l flex row-center col-center">
              <img src="img/order_detail_point0.png" alt="">
              <div class="line"></div>
            </div>
            <p class="l-state">付款</p>
          </div>
          <div class="item w100">
            <div class="l flex row-center col-center">
              <img src="img/order_detail_point0.png" alt="">
              <div class="line"></div>
            </div>
            <p class="l-state">配货</p>
          </div>
          <div class="item w100">
            <div class="l flex row-center col-center">
              <img src="img/order_detail_point0.png" alt="">
              <div class="line"></div>
            </div>
            <p class="l-state">发货</p>
          </div>
          <div class="item">
            <div class="l flex row-center col-center">
              <img src="img/order_detail_point0.png" alt="">
            </div>
            <p class="l-state">完成</p>
          </div>
        </div>
      </div>

      <div class="address">
        <div class="t flex row-between col-start">
          <p class="np">
            <span class="y-name">张三</span>
            <span class="phone">139****1234</span>
          </p>
          <a href="#">修改</a>
        </div>
        <div class="b">
          <p class="y-detail">青岛市崂山区青岛市崂山区青岛市崂山区青岛市崂山区青岛市崂山区青岛市崂山区青岛市崂山区青岛市崂山区青岛市崂山区青岛市崂山区青岛市崂山区青岛市崂山区青岛市崂山区青岛市崂山区青岛市崂山区</p>
        </div>
      </div>

      <div class="goods-detail">
        <div class="desc flex row-between col-start">
          <div class="desc-img">
            <img src="img/goods04.jpg" alt="">
          </div>
          <div class="desc-detail">
            <p class="d-name">北欧印象纳米抗菌餐具 6英寸面碗2件套6英寸面碗2件套</p>
            <p class="price clearfix">
              <span class="fl">￥49</span>
              <span class="number fr">x999</span>
            </p>
          </div>
        </div>
      </div>

      <div class="other-detail">
        <ul class="other">
          <li class="item flex row-between col-center">
            <span class="l">订单编号</span>
            <span class="r">123456789</span>
          </li>
          <li class="item flex row-between col-center">
            <span class="l">下单日期</span>
            <span class="r">2018-8-22 16:00</span>
          </li>
        </ul>

        <ul class="other">
          <li class="item flex row-between col-center">
            <span class="l">发票类型</span>
            <span class="r">不开发票</span>
          </li>
          <li class="item flex row-between col-center">
            <span class="l">发票信息</span>
            <span class="r">暂无发票信息</span>
          </li>
          <li class="item flex row-between col-center">
            <span class="l">买家留言</span>
            <span class="r">匿名购买</span>
          </li>
        </ul>
      </div>

      <div class="total-price">
        <ul class="total">
          <li class="item flex row-between col-center">
            <span class="l">订单金额</span>
            <span class="price">￥
              <span>109.00</span>
            </span>
          </li>
          <li class="item flex row-between col-center">
            <span class="l">运费</span>
            <span class="price">+ ￥
              <span>0</span>
            </span>
          </li>
        </ul>
        <div class="end-price">实付款：
          <span>￥89</span>
        </div>
      </div>
    </main>

    <div class="o-go-pay flex row-between col-center">
      <p class="close">
        <span>1</span>小时后订单将关闭</p>
      <div class="btn flex-start-center">
        <button class="btn1">取消订单</button>
        <button class="btn2">去支付</button>
      </div>
    </div>
  </div>
</body>

</html>